<script lang="ts">
	import RectButton from "$lib/components/Basic/Button/RectButton.svelte";
</script>

<div class="theme-demo">
	<div class="shades">
		<div class="shade" style="background-color: var(--color-primary-50);"></div>
		<div class="shade" style="background-color: var(--color-primary-100);"></div>
		<div class="shade" style="background-color: var(--color-primary-200);"></div>
		<div class="shade" style="background-color: var(--color-primary-300);"></div>
		<div class="shade" style="background-color: var(--color-primary-400);"></div>
		<div class="shade" style="background-color: var(--color-primary-500);"></div>
		<div class="shade" style="background-color: var(--color-primary-600);color: white;"></div>
		<div class="shade" style="background-color: var(--color-primary-700);color: white;"></div>
		<div class="shade" style="background-color: var(--color-primary-800);color: white;"></div>
		<div class="shade" style="background-color: var(--color-primary-900);color: white;"></div>
		<div class="shade" style="background-color: var(--color-primary-950); color: white;"></div>
	</div>
</div>
<div class="theme-demo">			
	<div class="shades">
		<div class="shade" style="background-color: var(--color-success-50);"></div>
		<div class="shade" style="background-color: var(--color-success-100);"></div>
		<div class="shade" style="background-color: var(--color-success-200);"></div>
		<div class="shade" style="background-color: var(--color-success-300);"></div>
		<div class="shade" style="background-color: var(--color-success-400);"></div>
		<div class="shade" style="background-color: var(--color-success-500);"></div>
		<div class="shade" style="background-color: var(--color-success-600);color: white;"></div>
		<div class="shade" style="background-color: var(--color-success-700);color: white;"></div>
		<div class="shade" style="background-color: var(--color-success-800);color: white;"></div>
		<div class="shade" style="background-color: var(--color-success-900);color: white;"></div>
		<div class="shade" style="background-color: var(--color-success-950); color: white;"></div>
	</div>
</div>
<div class="theme-demo">			
	<div class="shades">
		<div class="shade" style="background-color: var(--color-warning-50);"></div>
		<div class="shade" style="background-color: var(--color-warning-100);"></div>
		<div class="shade" style="background-color: var(--color-warning-200);"></div>
		<div class="shade" style="background-color: var(--color-warning-300);"></div>
		<div class="shade" style="background-color: var(--color-warning-400);"></div>
		<div class="shade" style="background-color: var(--color-warning-500);"></div>
		<div class="shade" style="background-color: var(--color-warning-600);color: white;"></div>
		<div class="shade" style="background-color: var(--color-warning-700);color: white;"></div>
		<div class="shade" style="background-color: var(--color-warning-800);color: white;"></div>
		<div class="shade" style="background-color: var(--color-warning-900);color: white;"></div>
		<div class="shade" style="background-color: var(--color-warning-950); color: white;"></div>
	</div>
</div>
<div class="theme-demo">			
	<div class="shades">
		<div class="shade" style="background-color: var(--color-error-50);"></div>
		<div class="shade" style="background-color: var(--color-error-100);"></div>
		<div class="shade" style="background-color: var(--color-error-200);"></div>
		<div class="shade" style="background-color: var(--color-error-300);"></div>
		<div class="shade" style="background-color: var(--color-error-400);"></div>
		<div class="shade" style="background-color: var(--color-error-500);"></div>
		<div class="shade" style="background-color: var(--color-error-600);color: white;"></div>
		<div class="shade" style="background-color: var(--color-error-700);color: white;"></div>
		<div class="shade" style="background-color: var(--color-error-800);color: white;"></div>
		<div class="shade" style="background-color: var(--color-error-900);color: white;"></div>
		<div class="shade" style="background-color: var(--color-error-950); color: white;"></div>
	</div>
</div>
<div style="margin-top:20px">
	<RectButton icon="interface/palette" label="确认11111" size="lg" variant="info" type="filled" disabled={true}></RectButton>
	<RectButton icon="interface/palette" label="确认22222555555522" size="lg" variant="info" type="filled" disabled={false}></RectButton>
</div>
<div style="margin-top:20px">
	<RectButton icon="interface/palette" size="md" label="确认" variant="primary" type="filled" disabled={true}></RectButton>
	<RectButton icon="interface/palette" size="md" label="确认" variant="primary" type="filled" disabled={false}></RectButton>
</div>
<div style="margin-top:20px">
	<RectButton icon="interface/palette" size="sm" label="确认" variant="secondary" type="filled" disabled={true}></RectButton>
	<RectButton icon="interface/palette" size="sm" label="确认" variant="secondary" type="filled" disabled={false}></RectButton>
</div>
<div style="margin-top:20px">
	<RectButton icon="interface/palette" size="md" label="确认" variant="success" type="filled" disabled={true}></RectButton>
	<RectButton icon="interface/palette" size="md" label="确认" variant="success" type="filled" disabled={false}></RectButton>
</div>
<div style="margin-top:20px">
	<RectButton icon="interface/palette" size="md" label="确认" variant="warning" type="filled" disabled={true}></RectButton>
	<RectButton icon="interface/palette" size="md" label="确认" variant="warning" type="filled" disabled={false}></RectButton>
</div>
<div style="margin-top:20px">
	<RectButton icon="interface/palette" size="md" label="确认" variant="error" type="filled" disabled={true}></RectButton>
	<RectButton icon="interface/palette" size="md" label="确认" variant="error" type="filled" disabled={false}></RectButton>
</div>

<style scoped>
	.theme-demo {
		padding: 0.51rem;
	}
	.shades {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.shade {
		width: 50px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		font-size: 0.8rem;
		font-weight: bold;
	}
</style>
